import React, { Component, Fragment } from "react";
import {
  Layout,
  Menu,
  Icon,
  Dropdown,
  Avatar,
  Badge,
  Breadcrumb,
  Switch,
  Row,
  Col,
} from "antd";
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";
import { getNotificationList } from "@/actions/notifications";
import { logout } from "@/actions/user";
import { adminRoutes } from "@/routes";
import "./style.less";
import logo from "@/assets/img/logo.png";

const { Header, Content, Sider } = Layout;

const mapState = (state) => {
  return {
    notificationsCount: state.notifications.list.filter(
      (item) => item.hasRead === false
    ).length,
    avatar: state.user.avatar,
    displayName: state.user.displayName,
  };
};
@connect(mapState, { getNotificationList, logout })
@withRouter
class Frame extends Component {
  constructor() {
    super();
    this.state = {
      isLight: true,
      collapsed: false,
      openKeys: [],
      rootSubmenuKeys: [],
    };
  }

  componentDidMount() {
    let openKeys = this.props.location.pathname.split("/");
    if (openKeys.length > 3) {
      this.setState({ openKeys: ["/" + openKeys[1] + "/" + openKeys[2]] });
    }
    this.props.getNotificationList();
  }
  onMenuClick = ({ key }) => {
    this.props.history.push(key);
    this.state.openKeys.forEach((v) => {
      if (key.includes(v)) {
        this.setState({ openKeys: [v] });
      } else {
        this.setState({ openKeys: [] });
      }
    });
  };
  onOpenChange = (openKeys) => {
    this.setState({ openKeys });
  };
  checkTheme = (checked) => {
    this.setState({
      isLight: checked ? true : false,
    });
  };

  toggleCollapsed = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  onDropdownMenuClick = ({ key }) => {
    if (key === "/logout") {
      this.props.logout();
    } else {
      this.props.history.push(key);
    }
  };

  renderDropdown = () => (
    <Menu onClick={this.onDropdownMenuClick}>
      <Menu.Item key="/admin/article/notifications">
        <Badge dot={Boolean(this.props.notificationsCount)}>通知中心</Badge>
      </Menu.Item>
      <Menu.Item key="/admin/setting/profile">个人设置</Menu.Item>
      <Menu.Item key="/logout">退出登录</Menu.Item>
    </Menu>
  );

  renderBreadcrumb = (adminRoutes) => {
    const { pathname } = this.props.location;
    const breadName = adminRoutes.filter((v) => {
      return v.pathname === pathname || pathname.includes(v.pathname);
    });
    return breadName.map((item) => {
      if (item.children) {
        return (
          <Fragment key={item.pathname}>
            <Breadcrumb.Item>{item.title}</Breadcrumb.Item>
            {this.renderBreadcrumb(item.children)}
          </Fragment>
        );
      } else {
        return (
          <Breadcrumb.Item key={item.pathname}>{item.title}</Breadcrumb.Item>
        );
      }
    });
  };
  renderMenu = (adminRoutes) => {
    const { SubMenu } = Menu;
    return adminRoutes.map((item) => {
      if (item.children && item.isNav) {
        return (
          <SubMenu
            key={item.pathname}
            title={
              <span>
                <Icon type={item.icon} />
                <span>{item.title}</span>
              </span>
            }
          >
            {this.renderMenu(item.children)}
          </SubMenu>
        );
      } else {
        return item.isNav ? (
          <Menu.Item key={item.pathname}>
            {item.icon && <Icon type={item.icon} />}
            <span>{item.title}</span>
          </Menu.Item>
        ) : null;
      }
    });
  };

  render() {
    const { isLight, collapsed, openKeys } = this.state;
    return (
      <Layout style={{ height: "100%", display:"flex",flexDirection:"column" }}>
        <Header className="header qf-header">
          <div className="qf-logo">
            <img src={logo} alt="QFADMIN" />
          </div>
          <div style={{ marginRight: "10px" }}>
            <Switch
              checkedChildren="浅色"
              unCheckedChildren="深色"
              defaultChecked
              onChange={this.checkTheme}
            />
          </div>
          <div>
            <Dropdown overlay={this.renderDropdown()}>
              <div style={{ display: "flex", alignItems: "center" }}>
                <Avatar src={this.props.avatar} />
                <span>欢迎您！{this.props.displayName}</span>
                <Badge
                  count={this.props.notificationsCount}
                  offset={[-10, -10]}
                >
                  <Icon type="down" />
                </Badge>
              </div>
            </Dropdown>
          </div>
        </Header>
        <Layout style={{flex:'auto'}}>
          <Sider
            width={180}
            style={{ background: "#fff" }}
            trigger={null}
            collapsible
            collapsed={collapsed}
          >
            <Menu
              theme={isLight ? "light" : "dark"}
              mode="inline"
              selectedKeys={[this.props.location.pathname]}
              openKeys={openKeys}
              onClick={this.onMenuClick}
              onOpenChange={this.onOpenChange}
              style={{ height: "100%", borderRight: 0 }}
            >
              {this.renderMenu(adminRoutes)}
            </Menu>
          </Sider>
          <Layout style={{ padding: "0 16px 16px" }}>
            <Row type="flex">
              <Col>
                <Icon
                  onClick={this.toggleCollapsed}
                  type={collapsed ? "menu-unfold" : "menu-fold"}
                  style={{ margin: "20px 10px 0 0", cursor: "pointer" }}
                />
              </Col>
              <Col>
                <Breadcrumb style={{ margin: "16px 0" }}>
                  {this.renderBreadcrumb(adminRoutes)}
                </Breadcrumb>
              </Col>
            </Row>
            <Content
              style={{
                background: "#fff",
                margin: 0,
              }}
            >
              {this.props.children}
            </Content>
          </Layout>
        </Layout>
      </Layout>
    );
  }
}
export default Frame;
